<template>
  <ion-app>
    <ion-split-pane content-id="main-content">
      <ion-menu content-id="main-content" type="overlay">
        <ion-content>
          <ion-list id="inbox-list">
            <ion-list-header>DANCI</ion-list-header>
            <ion-note>yuhon@live.com</ion-note>

            <ion-menu-toggle :auto-hide="false" v-for="(p, i) in appPages" :key="i">
              <ion-item @click="selectedIndex = i" router-direction="root" :router-link="p.url" lines="none" :detail="false" class="hydrated" :class="{ selected: selectedIndex === i }">
                <ion-icon aria-hidden="true" slot="start" :ios="p.iosIcon" :md="p.mdIcon"></ion-icon>
                <ion-label>{{ p.title }}</ion-label>
              </ion-item>
            </ion-menu-toggle>
          </ion-list>

          <ion-list id="labels-list">
            <ion-list-header>Labels</ion-list-header>

            <ion-item v-for="(label, index) in labels" lines="none" :key="index">
              <ion-icon aria-hidden="true" slot="start" :ios="bookmarkOutline" :md="bookmarkSharp"></ion-icon>
              <ion-label>{{ label }}</ion-label>
            </ion-item>
          </ion-list>
        </ion-content>
      </ion-menu>
      <ion-router-outlet id="main-content"></ion-router-outlet>
    </ion-split-pane>
  </ion-app>
</template>

<script setup lang="ts">
import {
  IonApp,
  IonContent,
  IonIcon,
  IonItem,
  IonLabel,
  IonList,
  IonListHeader,
  IonMenu,
  IonMenuToggle,
  IonNote,
  IonRouterOutlet,
  IonSplitPane,
} from '@ionic/vue';
import { ref } from 'vue';
import {
  archiveOutline,
  archiveSharp,
  bookmarkOutline,
  bookmarkSharp,
  heartOutline,
  heartSharp,
  mailOutline,
  mailSharp,
  paperPlaneOutline,
  paperPlaneSharp,

} from 'ionicons/icons';

const selectedIndex = ref(0);
const appPages = [
  {
    title: '1129',
    url: '/folder/dc1129',
    iosIcon: mailOutline,
    mdIcon: mailSharp,
  },
  {
    title: '1130',
    url: '/folder/dc1130',
    iosIcon: paperPlaneOutline,
    mdIcon: paperPlaneSharp,
  },
  {
    title: '1201',
    url: '/folder/dc1201',
    iosIcon: heartOutline,
    mdIcon: heartSharp,
  },
  {
    title: '1202',
    url: '/folder/dc1202',
    iosIcon: archiveOutline,
    mdIcon: archiveSharp,
  },
  {
    title: '1203',
    url: '/folder/dc1203',
    iosIcon: bookmarkOutline,
    mdIcon: bookmarkSharp,
  },
  {
    title: '1204',
    url: '/folder/dc1204',
    iosIcon: mailOutline,
    mdIcon: mailSharp,
  },
  {
    title: '1205',
    url: '/folder/dc1205',
    iosIcon: paperPlaneOutline,
    mdIcon: paperPlaneSharp,
  },
  {
    title: '1206',
    url: '/folder/dc1206',
    iosIcon: heartOutline,
    mdIcon: heartSharp,
  },
  {
    title: '1207',
    url: '/folder/dc1207',
    iosIcon: archiveOutline,
    mdIcon: archiveSharp,
  },
  {
    title: '1208',
    url: '/folder/dc1208',
    iosIcon: bookmarkOutline,
    mdIcon: bookmarkSharp,
  },
  {
    title: '1209',
    url: '/folder/dc1209',
    iosIcon: mailOutline,
    mdIcon: mailSharp,
  },
  {
    title: '1210',
    url: '/folder/dc1210',
    iosIcon: paperPlaneOutline,
    mdIcon: paperPlaneSharp,
  },
  {
    title: '1211',
    url: '/folder/dc1211',
    iosIcon: heartOutline,
    mdIcon: heartSharp,
  },
  {
    title: '1212',
    url: '/folder/dc1212',
    iosIcon: archiveOutline,
    mdIcon: archiveSharp,
  },
  {
    title: '1213',
    url: '/folder/dc1213',
    iosIcon: bookmarkOutline,
    mdIcon: bookmarkSharp,
  },
  {
    title: '1214',
    url: '/folder/dc1214',
    iosIcon: mailOutline,
    mdIcon: mailSharp,
  },
  {
    title: '1215',
    url: '/folder/dc1215',
    iosIcon: paperPlaneOutline,
    mdIcon: paperPlaneSharp,
  },
  
];
const labels = ['Family', 'Friends', 'Notes', 'Work', 'Travel', 'Reminders'];

const path = window.location.pathname.split('folder/')[1];
if (path !== undefined) {
  selectedIndex.value = appPages.findIndex((page) => page.title.toLowerCase() === path.toLowerCase());
}
</script>

<style scoped>
ion-menu ion-content {
  --background: var(--ion-item-background, var(--ion-background-color, #fff));
}

ion-menu.md ion-content {
  --padding-start: 8px;
  --padding-end: 8px;
  --padding-top: 20px;
  --padding-bottom: 20px;
}

ion-menu.md ion-list {
  padding: 20px 0;
}

ion-menu.md ion-note {
  margin-bottom: 30px;
}

ion-menu.md ion-list-header,
ion-menu.md ion-note {
  padding-left: 10px;
}

ion-menu.md ion-list#inbox-list {
  border-bottom: 1px solid var(--ion-background-color-step-150, #d7d8da);
}

ion-menu.md ion-list#inbox-list ion-list-header {
  font-size: 22px;
  font-weight: 600;

  min-height: 20px;
}

ion-menu.md ion-list#labels-list ion-list-header {
  font-size: 16px;

  margin-bottom: 18px;

  color: #757575;

  min-height: 26px;
}

ion-menu.md ion-item {
  --padding-start: 10px;
  --padding-end: 10px;
  border-radius: 4px;
}

ion-menu.md ion-item.selected {
  --background: rgba(var(--ion-color-primary-rgb), 0.14);
}

ion-menu.md ion-item.selected ion-icon {
  color: var(--ion-color-primary);
}

ion-menu.md ion-item ion-icon {
  color: #616e7e;
}

ion-menu.md ion-item ion-label {
  font-weight: 500;
}

ion-menu.ios ion-content {
  --padding-bottom: 20px;
}

ion-menu.ios ion-list {
  padding: 20px 0 0 0;
}

ion-menu.ios ion-note {
  line-height: 24px;
  margin-bottom: 20px;
}

ion-menu.ios ion-item {
  --padding-start: 16px;
  --padding-end: 16px;
  --min-height: 50px;
}

ion-menu.ios ion-item.selected ion-icon {
  color: var(--ion-color-primary);
}

ion-menu.ios ion-item ion-icon {
  font-size: 24px;
  color: #73849a;
}

ion-menu.ios ion-list#labels-list ion-list-header {
  margin-bottom: 8px;
}

ion-menu.ios ion-list-header,
ion-menu.ios ion-note {
  padding-left: 16px;
  padding-right: 16px;
}

ion-menu.ios ion-note {
  margin-bottom: 8px;
}

ion-note {
  display: inline-block;
  font-size: 16px;

  color: var(--ion-color-medium-shade);
}

ion-item.selected {
  --color: var(--ion-color-primary);
}
</style>
